<template>
  <div>
    <el-dialog
      title="流程"
      :visible.sync="auditProcessDialog"
      width="640px"
      :before-close="dialogClose"
      :append-to-body="true"
      id="auditDialog"
    >
      <div class="block" style="padding-top: 8px">
        <ul>
          <li class="auditBox" v-for="item in InsureList" :key="item.id">
            <div class="auditLine"></div>
            <div class="auditIcon">
              <p>{{ item.checkUserTypeDesc }}</p>
            </div>
            <div class="contBox clearfix">
              <div class="titleSty fl moreNameSty">
                <template v-if="item.checkUser == null || item.checkUser == ''">
                  <p
                    v-for="(items, index) in item.checkUserList"
                    :key="index"
                    class="nameSty"
                  >
                    <span>{{ items.nickname }}</span>
                    <span>{{ '(' + items.username + ')' }}</span
                    ><span v-if="index != item.checkUserList.length - 1">
                      /
                    </span>
                  </p>
                </template>
                <p class="nameSty" v-else>
                  <span>{{ item.nickname + '(' + item.username + ')' }}</span>
                </p>
                <p
                  :class="'timeSty ' + item.checkStatus"
                  v-if="item.checkStatus != 'REJECTED'"
                >
                  {{ item.checkStatusDesc }}
                </p>
                <p :class="'timeSty ' + item.checkStatus" v-else>
                  {{ item.checkStatusDesc }}：{{ item.reason }}
                </p>
              </div>
              <div class="fr timeBox">
                <span class="timeSty">{{ item.updateTime }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'auditProcess',
  data() {
    return {
      auditProcessDialog: true,
      InsureList: [],
    }
  },
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  created() {
    this.getInsureCheckProcess()
  },
  methods: {
    dialogClose() {
      this.$emit('closeDialog')
    },
    getInsureCheckProcess() {
      this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/getInsureCheckProcess',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.InsureList = response.data.result
            // this.InsureList[1].checkUserList = [{nickname:"12345",username:"45566"},{nickname:"12345",username:"45566"},{nickname:"12345",username:"45566"}]
            // this.InsureList[0].checkStatusDesc = "提交投保订单"
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>
<style scoped lang="less">
@AUDITING: #ffa449; //审核中
@REJECTED: #e31c12; //驳回
@PASSED: #06ac15; //审核通过
.auditBox {
  position: relative;
  padding-bottom: 44px;
  min-height: 46px;
  &:last-child {
    padding-bottom: 24px;
    .auditLine {
      border-left: 0 !important;
    }
  }
  .auditLine {
    position: absolute;
    left: 23px;
    height: 100%;
    border-left: 2px solid #e4e7ed;
  }
  .auditIcon {
    width: 46px;
    height: 46px;
    background: #3189ea;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    // line-height:46px;
    position: absolute;
    font-size: 12px;
    p {
      width: 24px;
      margin-left: 11px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .contBox {
    position: relative;
    padding-left: 58px;
    // top: 2px;
    // height:42px;
    .titleSty {
      margin-bottom: 8px;
    }
    .nameSty {
      font-size: 16px;
      color: #333333;
      font-weight: 700;
      display: inline-block;
    }
    .moreNameSty {
      width: 300px;
    }
    .timeSty {
      color: #999;
      font-size: 14px;
    }
    .timeBox {
      width: 72px;
      text-align: center;
      line-height: 21px;
    }
  }
}
// #auditDialog/deep/.el-dialog__body{
//     padding: 28px 30px !important;
// }
.AUDITING {
  color: @AUDITING !important;
}
.REJECTED {
  color: @REJECTED !important;
}
.PASSED {
  color: @PASSED !important;
}
</style>
